<template>
    <MainSlot v-loading="loading">
        <template v-slot:searchForm>
            <SearchForm v-if="formItemList.length" :formItemList="formItemList" :unfoldFlag="unfoldFlag"
                @search="search" @isUnfold="(v) => { unfoldFlag = v }">
            </SearchForm>
        </template>
        <template v-slot:btn>
            <BtnSlot :btnList="btnList" @handleEvent="getBtnEvent"></BtnSlot>
        </template>
        <template v-slot:table>
            <div class="fileList">
                <div class="fileObj" v-for="fileObj, index in dataList" :key="index + 'fileObj'">
                    <div class="title">
                        <span> 报告名称：{{ fileObj.reportName }}</span>
                        <span> 上传人：{{ fileObj.staffName }}</span>
                    </div>
                    <div class="title bottomTitle">
                        <span> 上传时间：{{ fileObj.uploadDateTime }}</span>
                        <span>
                            <span class="btn errorText" @click="delList([fileObj])">删 除</span>
                            <span class="btn successText" @click="handleRow(fileObj, { flag: 'edit' })">预 览</span>
                        </span>
                    </div>
                    <div class="file" title="点击预览"
                        v-if="fileObj.reportFileIdList && fileObj.reportFileIdList.length > 0"
                        @click="handleRow(fileObj, { flag: 'edit' })">
                        <iframe class="iframe" scrolling="no"
                            :src="`${$baseurl.fileServiceUrl}base/files/preview?fileId=${fileObj.reportFileIdList[0]}#toolbar=0`"
                            style="width: calc(100% + 30px);height: calc(100% + 30px); pointer-events: none;"></iframe>
                        <div class="fileNum">共{{ fileObj.reportFileIdList.length }}份</div>
                    </div>
                </div>
            </div>
        </template>
        <template v-slot:pagination>
            <Pagination @current-change="handleCurrentChange" :page="page" :size="size" :total="total">
            </Pagination>
        </template>
        <template v-slot:dialogModule>
            <AddEdit :title="'检验报告'" :staffList="staffList" :addEditFlag="addEditFlag" :dialogVisible="dialogVisible"
                :data="formData" @closeDialog="closeDialog">
            </AddEdit>
        </template>
    </MainSlot>
</template>
<script>
import MainSlot from "@/components-production-management/MainSlot";
import Pagination from '@/components-production-management/Pagination';
import SearchForm from '@/components-production-management/SearchForm';
import TableData from '@/components-production-management/TableData';
import BtnSlot from '@/components-production-management/BtnSlot';
import EnumSlot from '@/components-production-management/EnumSlot';
import AddEdit from './components/addEdit.vue';
import qualityMonitoringReportManagement from '@/api/quality-management/quality-monitoring-report-management.js';
import staffApi from "@/api/basic-info-manage/staff";

export default {
    components: { MainSlot, Pagination, SearchForm, TableData, BtnSlot, EnumSlot, AddEdit },
    data() {
        return {
            unfoldFlag: false,
            loading: false,
            dialogVisible: false,
            addEditFlag: 'add',
            selectList: [],
            unitList: [],
            formData: {},
            page: 1,
            total: 10,
            size: 4,
            selectIndex: 0,
            searchFormData: {},
            btnList: ['add'],
            dataList: [],
            // 配置项
            table_config: {
                isCheckBox: true,

                isOperation: true,
                // 表格操作列
                operation: {
                    label: '操作',
                    width: '200',
                    cols: [
                        {
                            label: '编辑',
                            type: 'primary',
                            flag: 'edit',
                            handleRow: this.handleRow
                        },
                        {
                            label: '删除',
                            type: 'danger',
                            flag: 'del',
                            handleRow: this.handleRow
                        }
                    ]
                },
            },
            staffList: [],
            varietyList: [],
            formItemList: [
                {
                    label: '报告名称',
                    type: 'input',
                    param: 'reportName',
                    defaultSelect: '',
                    multiple: false,
                    isShow: true
                },
                {
                    label: '上传人',
                    type: 'select',
                    selectOptions: [],
                    param: 'staffName',
                    defaultSelect: '', // 下拉框默认选中项
                    multiple: false,
                    isShow: true
                },
                {
                    label: '上传时间',
                    type: 'datetimerange',
                    param: 'dateTime',
                    multiple: false,
                    isShow: true
                },
            ]
        }
    },
    mounted() {
        this.queryPageByCondition();
        this.initData();
    },
    methods: {
        async initData() {
            let { data: staffList } = await staffApi.queryByCondition();
            this.staffList = staffList || [];
            this.setFormOptions();
        },
        setFormOptions() {
            let list = JSON.parse(JSON.stringify(this.formItemList));
            this.formItemList = []
            list.forEach((item, index) => {
                if (item.param.indexOf('staffName') !== -1) {
                    let selectOptions = this.staffList.map(data => {
                        return {
                            text: data.staffName, value: data.staffName
                        }
                    })
                    item.defaultSelect = this.searchFormData[item.param];
                    item.selectOptions = selectOptions;
                };
            });
            this.$nextTick(() => {
                this.$set(this, 'formItemList', list)
                console.log(this.formItemList)
            })
        },
        delList(deleteList = [], key = 'checkReportId') {
            let list = []
            deleteList.forEach(item => {
                list.push(item[key])
            })
            console.log(list)
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await qualityMonitoringReportManagement.delList(list);
                if (res.success) {
                    this.$message.success(res.msg || '删除成功');
                    this.queryPageByCondition();
                } else {
                    this.$message.warning(res.msg || '删除失败');
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        lookView(row) {
            console.log(row)
        },
        queryPageByCondition() {
            let params = {
                page: this.page,
                size: this.size,
                entity: {
                    ...this.searchFormData
                }
            }
            this.loading = true;
            qualityMonitoringReportManagement.queryPageByCondition(params).then(res => {
                this.loading = false;
                if (res.success) {
                    this.dataList = res.data.content || [];
                    this.total = res.data.totalElements;
                    if (res.data.totalPages && this.page > res.data.totalPages) {
                        this.page = res.data.totalPages;
                        this.queryPageByCondition();
                    }
                } else {
                    this.$message.warning(res.msg || '分页查询失败')
                }
            }).catch(err => {
                this.loading = false;
                console.log(err)
            })
        },
        search(data) {
            this.page = 1;
            let endData = null;
            let startData = null;
            console.log(data.dateTime)
            if (data.dateTime && data.dateTime.length == 2) {
                startData = `${data.dateTime[0]} 00:00:00`;
                endData = `${data.dateTime[1]} 23:59:59`;
            }
            this.searchFormData = {
                ...this.searchFormData,
                ...data,
                endTime: endData,
                startTime: startData
            };
            this.searchFormData = { ...this.searchFormData, ...data };
            this.queryPageByCondition();
        },
        handleCurrentChange(page) {
            this.page = page;
            this.queryPageByCondition();
        },
        // 操作方法
        handleRow(rowData, item) {
            if (item.flag == 'edit') {
                this.dialogVisible = true;
                this.formData = JSON.parse(JSON.stringify(rowData))
            } else if (item.flag == 'del') {
                this.delList([rowData]);
            }
            this.addEditFlag = item.flag
        },
        // 多选方法
        selectionChange(val) {
            this.selectList = val || []
        },
        //获取选中Btn
        getBtnEvent(flag) {
            console.log(flag)
            if (flag == 'add') {
                this.dialogVisible = true
            } else if (flag == 'delete') {
                if (this.selectList.length > 0) {
                    this.delList(this.selectList)
                } else {
                    this.$message.warning('请先选择表单数据项后再删除！')
                }
            }
            this.addEditFlag = flag
        },
        //关闭弹窗
        closeDialog() {
            this.dialogVisible = false;
            this.queryPageByCondition();
        },
    }
};
</script>
<style lang="scss" scoped>
.fileList {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;



    .fileObj {
        width: calc(100% / 4 - 20px);
        height: calc(100%);
        margin: 10px;
        box-shadow: 0 0 6px 1px #0480fb80;
        cursor: pointer;

        .title {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: nowrap;
            align-items: center;
            background-color: #d6ebfe;
            color: #666666;
            line-height: 20px;
            cursor: pointer;
        }

        .bottomTitle {
            font-size: 12px;

            .btn {
                padding-left: 15px;
            }
        }

        .file {
            width: 100%;
            height: calc(100% - 40px);
            box-sizing: border-box;
            overflow: hidden;
            position: relative;

            .iframe {
                position: absolute;
                top: 50%;
                left: 52%;
                transform: translate(-50%, -50%);
            }

            .fileNum {
                position: absolute;
                bottom: 0px;
                right: 0px;
                background: #017aae;
                padding: 10px 15px;
                color: #ffffff;
            }

        }
    }
}
</style>